import React, { useCallback, useState, useContext, forwardRef } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import { Select, Row, Col, AutoComplete } from "antd";
const { Option } = AutoComplete;
import { useDispatch, useSelector } from "react-redux";
import { searchEmployee, resetAdmin } from "@sagas/employee";
const ResetAdminContent = props => {
    const { callback } = props
    const { params, hide } = useContext(CustomizeModalContext)
    const { storeId } = params
    const [result, setResult] = useState([]);
    const [emp, setEmp] = useState()
    const dispatch = useDispatch()
    const { superAdmin } = useSelector(state => state.employee)

    const handleSearch = (value) => {
        if (!value) {
            return
        }
        dispatch(searchEmployee({
            search: value,
            pageNo: 1,
            pageSize: 10,
        }, (res) => {
            setResult(res.employees);
        }))
    };

    const handleSelect = (value) => {
        setEmp(value)
    };

    const submit = () => {
        if (!emp) {
            return
        }
        dispatch(resetAdmin({
            empId: parseInt(emp),
            storeId,
            pStoreId: storeId
        }, () => {
            callback && callback()
            hide()
        }))
    }

    return (
        <>
            <Row className="modal-line">
                <span className='ft-clr-l'>当前超管：{superAdmin.name} {superAdmin.mobile ? `(${superAdmin.mobile})` : ''} 转让后原有权限失效</span>
            </Row>
            <Row className="modal-line">
                <Col span={4}>
                    员工
                </Col>
                <Col span={20}>
                    <Select
                        showSearch
                        value={emp}
                        onSearch={handleSearch}
                        onChange={handleSelect}
                        placeholder="请输入员工姓名、手机号搜索"
                        notFoundContent={null}
                    >
                        {result.map(d => <Option key={d.emp_id} value={d.mobile}>{d.name}</Option>)}
                    </Select>
                </Col>
            </Row>
            <CustomizeModalButton
                onOk={submit}
                onCancel={hide}
            />
        </>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal width={500} title="转让超管" ref={ref}>
        <ResetAdminContent {...props} />
    </CustomizeModal>
))
